import {
	MenuFoldOutlined,
	MenuUnfoldOutlined,
	UploadOutlined,
	UserOutlined,
	VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Dropdown, Button } from 'antd';
import React, { useState } from 'react';
import '../styles/home.less'
import Menus from '@/components/menu';
import MenuTabs from '@/components/menuTabs';
import { useHistory } from 'react-router';
import { history } from 'umi';
const { Header, Sider, Content } = Layout;

type Props = {
	children: any
}



const Home = (props: Props) => {
	const history=useHistory()
	const [collapsed, setCollapsed] = useState(false);

	const out = () => {
		localStorage.clear()
		history.push('/login')
	}
	const items: any = [{ key: 1, label: (<a onClick={out}>退出登录</ a>), }]



	return (
		<Layout style={{ height: "100vh", width: '100vw' }}>
			<Sider trigger={null} collapsible collapsed={collapsed} style={{ height: '100vh' }}>
				<div style={{ textAlign: 'center' }}>
					<img src="https://demo26.crmeb.net/statics/system_images/admin_logo_small.png" alt="" height='60px' />
				</div>
				<Menus></Menus>

			</Sider>
			<Layout className="site-layout">
				<Header className="site-layout-background" style={{ padding: 0 }}>
					{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
						className: 'trigger',
						onClick: () => setCollapsed(!collapsed)
					})}
					<div style={{ float: 'right' }}>
						<Dropdown menu={{ items }} placement="bottom" arrow>
							<Button >欢迎~ {JSON.parse(localStorage.userInfo).account}</Button>
						</Dropdown>
					</div>
				</Header>

				<MenuTabs children={props.children}></MenuTabs>
				<Content
					className="site-layout-background"
					style={{
						margin: '24px 16px',
						marginTop: '20px',
						padding: 24,
						minHeight: 280,
						backgroundColor: '#fff'
					}}
				>
					{props.children}
				</Content>
			</Layout>
		</Layout>
	);
	// return (
	// 	<Layout style={{ height: "100vh" }}>
	// 		<Sider trigger={null} collapsible collapsed={collapsed}>
	// 			<div className="logo" />
	// 			<Menu
	// 				theme="dark"
	// 				mode="inline"
	// 				defaultSelectedKeys={['1']}
	// 				items={[
	// 					{
	// 						key: '1',
	// 						icon: <UserOutlined />,
	// 						label: 'nav 1',
	// 					},
	// 					{
	// 						key: '2',
	// 						icon: <VideoCameraOutlined />,
	// 						label: 'nav 2',
	// 					},
	// 					{
	// 						key: '3',
	// 						icon: <UploadOutlined />,
	// 						label: 'nav 3',
	// 					},
	// 				]}
	// 			/>
	// 		</Sider>
	// 		<Layout className="site-layout" style={{height:'100vh'}}>
	// 			<Header className="site-layout-background" style={{ padding: 0 }}>
	// 				{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
	// 					className: 'trigger',
	// 					onClick: () => setCollapsed(!collapsed),
	// 				})}
	// 			</Header>
	// 			<Content className="site-layout-background" style={{ margin: '24px 16px', padding: 24, minHeight: 280}} >
	// 				{/* children得到是一个React element 组件 */}
	// 				{props.children}
	// 			</Content>
	// 		</Layout>
	// 	</Layout>
	// );
};

export default Home;